import { FC,useRef, useEffect, useState } from "react"
import { connect } from "react-redux"
import JoLPlayer, { JoLPlayerRef } from "jol-player"
import { useTranslation } from 'react-i18next'
import "./index.scss"

interface IGameVideo {}

const GameVideo: FC<IGameVideo> = () => {

	const { t, i18n } = useTranslation()
	const videoRef = useRef<JoLPlayerRef>(null!)
 	const [ theme ] = useState<string>("#ffb821")

	 useEffect(() => {
	   console.log(`videoRef.current`, videoRef.current)
	 }, [videoRef.current])

	return (
		<div id="game-video">
			<div className='game-video-container'>
				<div className="game-video-title">
					<p>
						Ga
						<span className="game-video-title-m">m</span>
						e
					</p>
					<p>
						promot
						<span className="game-video-title-ion">ion </span>
						video
					</p>
				</div>
				<div className="game-video-box">
					<JoLPlayer
						className="jol-player-video"
						ref={videoRef}
						option={{
							videoSrc:
								"https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/prod/file/2021/08/31/540p.mp4",
							theme,
							poster:
								"https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/prod/file/2021/08/31/1080pp.png",
							language: i18n.language === "zh" ? "zh" : "en",
							pausePlacement: "center",
							isToast: true,
							isShowMultiple: false,
							isShowScreenshot: false,
							isShowWebFullScreen: false,
							isShowSet: false,
							isProgressFloat: true
						}}
					/>
				</div>
			</div>
		</div>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(GameVideo)